<template>
  <div class="banner">
    <swiper :options="swiperOption" ref="mySwiper">
       <!-- slides -->
      <swiper-slide>
        <img :src="imgUrl.image1" alt=""  width="1000px" height="460px">
      </swiper-slide>
      <swiper-slide>
        <img :src="imgUrl.image2" alt="" width="1000px" height="460px">
      </swiper-slide>
      <swiper-slide>
        <img :src="imgUrl.image3" alt=""  width="1000px" height="460px">
      </swiper-slide>
      <swiper-slide>
        <img :src="imgUrl.image4" alt=""  width="1000px" height="460px">
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>

    </swiper>

  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "banner",
  data() {
    return {
      //http://idangero.us/swiper/api/#navigation    API
      swiperOption: {
        //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        initialSlide: 0,
        // notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        loop: true,
        speed: 400,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        uniqueNavElements: true,
        // pagination: ".swiper-pagination",

        // naviation:{
        //   nextEl:'swiper-button-next',
        //   prevEl:'.swiper-button-prev',
        // },
        preventInteractionOnTransition: false,
        allowSilderPrev: true,
        allowSilderNext: true,
        //   scrollbar:'.swiper-scrollbar',//滚动条
        mousewheelControl: true,
        observer: true,
        observeParents: true,
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,

        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许点击小圆点跳转
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        onTransitionStart(swiper) {
          console.log(swiper);
        }
      },

      imgUrl: {
        image1: require("../assets/images/banner1.png"),
        image2: require("../assets/images/banner2.png"),
        image3: require("../assets/images/banner3.png"),
        image4: require("../assets/images/banner4.png")
      }
    };
  },
  mounted() {
    // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
    // this.swiper.slideTo(1, 1000, false);
  },
  computed: {
    // swiper() {
    //   console.log(this.$refs.mySwiper.swiper);
    //   return this.$refs.mySwiper.swiper;
    // }
  },

  components: {
    swiper,
    swiperSlide
  },
  created() {
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swiper-container {
  width: 1000px;
  height: 460px;
}
.swiper-button-prev {
  background: rgba(104, 102, 102, 0.331) url(../assets/images/arrow-left.png)
    no-repeat center center;
}
.swiper-button-next {
  background: rgba(104, 102, 102, 0.331)
    url(../assets/images/arrow-right.png) no-repeat center center;
}
</style>
